<template>
    <div>
        <div>

        </div>
        <div style="display: flex; flex-direction: row; ">
            <el-card style="width: 150px;">
                <div >
                    <el-link class="link" @click="switchDataset('user')">部门人员</el-link>
                    <el-link class="link" @click="switchDataset('stock')">测试数据</el-link>
                </div>
            </el-card>
            <el-card style="flex: 1; margin-left: 20px;">
                <div>
                    <el-button>导入</el-button>
                </div>
                <el-tabs>
                    <el-tab-pane label="定义">
                        <p>
                            数据集是形成指标和绩效的基础数据，可使用Excel作为模板导入
                        </p>
                        <p>
                            当存储引擎指定为mongodb的时候，无需手动定义数据表结构
                        </p>
                        <p>
                            当存储引擎指定为mysql或db2的时候，除定义数据集外，还需要手动建立数据表等程序无法完成的操作
                        </p>
                    </el-tab-pane>
                    <el-tab-pane label="数据集定义">
                        <code-editor ref="editor" class="editor h-100"
                                     style="height: 700px;"
                                     v-model="editorContent"
                                     readonly
                                     language="groovy" theme="dracula"></code-editor>
                    </el-tab-pane>
                    <el-tab-pane label="数据">
                        <el-table>
                        </el-table>
                    </el-tab-pane>
                </el-tabs>
            </el-card>
        </div>
    </div>
</template>

<script>
    import DatasetEdit from "./dataset-edit";
    import CodeEditor from "../code-editor";
    export default {
        name: "dataset",
        components: {CodeEditor, DatasetEdit},
        data() {
            return {
                dbs: [],
                editorContent: ""
            }
        },
        methods:{
            async loadDbs(){

            },
            add(){
                this.$refs.edit.show()
            },
            test(){

            },
            async switchDataset(type){
                if(type == 'user'){
                    var txt = (await import ("./groovy/user-dataset")).default
                    this.editorContent = txt
                } else if(type == 'stock'){
                    var txt = (await import ("./groovy/stock-dataset")).default
                    this.editorContent = txt
                }
            }
        },
        async mounted() {
            this.loadDbs()
            this.switchDataset("user")
        }
    }
</script>

<style scoped>
    .link{
        display: inline-block;
        margin-bottom: 10px;
        text-decoration: none !important;
    }
</style>
